<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20" style="height: 98vh;background: white;">
    <shopro-navbar :isBack="true">
      <view class="u-flex-1 u-flex  u-row-center u-col-center" slot="content">
        <view style="font-weight:bold">{{ title }}</view>
      </view>
    </shopro-navbar>
		<view style="margin: 0 30rpx;">
			<u-search shape="square" v-model="keyword" :showAction="showAction" placeholder="输入商邦名称" @search="search()" @clear="clearSearch"></u-search>
		</view>
		<view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="content scroll-Y" @scrolltolower="lower">
				<block v-for="(item,index) in shopList">
					<view style="padding: 10px;border-bottom: 1px solid #F3F3F3;display: flex;" :data-id="item.store_shop_id" @click="toItem">
						<view style="position: relative;">
							<image :src="item.shop_image" style="width: 260rpx;height: 194rpx;border-radius: 8rpx;"></image>
							<!-- <view style=" font-size: 12px;"> -->
							<view style="position: absolute;color: #FFFFFF; bottom: 10px; left: 5px;color: white;text-align: center; line-height: 18px;font-size: 12px;width: 68rpx;height: 36rpx;height: 18px;background: linear-gradient(270deg, #FF5251 0%, #FD8E8A 100%);border-radius: 8px 0px 8px 0px;opacity: 1;">
								{{item.discount}}
							</view>
						</view>
						<view>
							<view style="margin-left: 10px;">
								<view style="font-size: 32rpx;font-family: PingFang SC-Bold, PingFang SC;font-weight: bold;color: #333333;line-height: 50rpx;">{{item.shop_name}}</view>
								<view style="display: flex;flex-direction: row;">
									<view v-for="(tags,tagindex) in item.shop_tags" style="background-color: #FFF0E4;padding: 6rpx 10rpx;margin-right: 10rpx;border-radius: 2px 2px 2px 2px;font-size: 20rpx;font-family: PingFang SC-Medium, PingFang SC;font-weight: 500;color: #FE811C;line-height: 30rpx;">
										{{tags}}</view>
								</view>
								<view style="font-size: 20rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #999999;margin-top: 4px;">{{item.shop_text}}</view>
								<view style="left: -9rpx;position: relative;">

									<u-rate :value="item.shop_score" readonly activeColor="#FE811C"></u-rate>
								</view>
								<view style="display: flex;margin: 0rpx 0rpx;margin-top: 1px;">
									<view v-if="item.quan_text!=''">
										<image style="width: 32rpx;height: 32rpx;" src="https://d-duomi.bigchun.com/images/shangbang/quan.png"></image>
									</view>
									<view v-if="item.quan_text!=''" class="lable">
										{{item.quan_text}}</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<view v-if="current_page == last_page" style="height: 32px;font-size: 12px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #999999;line-height: 32px;text-align: center;">已经拉到底啦~</view>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import HuixuanClassify from "../../components/huixuan-classify/huixuan-classify";
	import HuixuanExercise from "../../components/huixuan-exercise/huixuan-exercise";
	export default {
		components: {},
		data() {
			return {
        title:'',
				triggered: false,
				current_page: 0,
				last_page: 1,
				showAction: false,
				statusBarHeight: systemInfo.statusBarHeight,
				showpopup: false,
				active: "1",
				themeColor: "#FC5351",
				// #ifdef MP-WEIXIN
				// #endif
				isRefresh: true,
				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //协议
				isScorll: false,
				sortList: [{
						name: "智能排序",
						id: "1"
					},
					{
						name: "折扣高低",
						id: "2"
					},
					{
						name: "人均消费高低",
						id: "3"
					},
					{
						name: "好评优先",
						id: "4"
					},
					{
						name: "销量优先",
						id: "5"
					},
					{
						name: "距离优先",
						id: "6"
					},
				],
				bannerList: [
					"https://d-duomi.bigchun.com/images/banner.png"
				],
				list: [{
						name: 'https://d-duomi.bigchun.com/images/shangbang/cyms.png',
						title: '餐饮美食',
					},
					{
						name: 'https://d-duomi.bigchun.com/images/shangbang/jdzs.png',
						title: '酒店住宿'
					},
					{
						name: 'https://d-duomi.bigchun.com/images/shangbang/dyyc.png',
						title: '电影演出'
					},
					{
						name: 'https://d-duomi.bigchun.com/images/shangbang/ydjs.png',
						title: '运动健身'
					},
					{
						name: 'https://d-duomi.bigchun.com/images/shangbang/scgw.png',
						title: '商城购物'
					},
					{
						name: 'https://d-duomi.bigchun.com/images/shangbang/cyms.png',
						title: '医学美容'
					}, {
						name: 'https://d-duomi.bigchun.com/images/shangbang/ycyc.png',
						title: '养车/用车'
					},
					{
						name: 'https://d-duomi.bigchun.com/images/shangbang/ylyk.png',
						title: '医疗/牙科'
					},
					{
						name: 'https://d-duomi.bigchun.com/images/shangbang/qzly.png',
						title: '亲子乐园'
					},
					{
						name: 'https://d-duomi.bigchun.com/images/shangbang/qbfw.png',
						title: '全部服务'
					}
				],
				systemBar: "",
				navigationBar: "",
				menu: "",
				page: 1,
				limit: 6,
				shop_sort: 0,
				shopList: [],
        keyword:''
			};
		},
		computed: {},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
		},
		onShow() {
			let that = this;
			this.enable = true;
			this.isLogin && this.getCartList();
			// 网络变化检测
			uni.onNetworkStatusChange(res => {
				this.isConnected = res.isConnected;
				res.isConnected && this.init();
			});
		},
		onHide() {
			this.enable = false;
		},
		onLoad(options) {
			console.log(options);
			this.store_cate_id = options.store_cate_id
			this.title = decodeURIComponent(options.title)
			this.shopLists();
		},
		methods: {
      // 清除搜索框
      clearSearch() {
        this.searchVal = '';
        this.clear();
      },
      clear() {
        this.shopList = [];
      },
			async shopLists() {
				console.log("=========initres")
				var that = this;
				//that.isRefresh = false;
				that.triggered = true;
				that.$https('category.shopLists', {
						token: uni.getStorageSync("token"),
						page: this.page,
						limit: this.limit,
						cate_id: this.store_cate_id,
						keyword: this.keyword,
					})
					.then(res => {
						console.log("shopLists=========res", res)
						that.triggered = false;
						if (res.code === 1) {
							if (res.data.current_page != 1) {
								that.shopList = that.shopList.concat(res.data.data);
								that.current_page = res.data.current_page;
								that.last_page = res.data.last_page;
								that.per_page = res.data.per_page;
								that.total = res.data.total;
							} else {
								that.shopList = res.data.data;
								that.current_page = res.data.current_page;
								that.last_page = res.data.last_page;
								that.per_page = res.data.per_page;
								that.total = res.data.total;
							}

						}
					});

			},
			search: function(e) {
				this.page = 1
				this.limit = 10
        this.goodsList = [];
        this.lastPage = 1;
        this.clear();
				this.shopLists()
			},
			lower: function(e) {
				console.log(this.current_page)
				console.log(this.per_page)
				if (this.current_page != this.last_page) {
					this.page = this.page + 1;
					this.shopLists()
				}
			},
			toItem(e) {
				console.log(e.currentTarget.dataset.id)
				uni.navigateTo({
					url: '/pages/index/GoodsDetails?id=' + e.currentTarget.dataset.id
				})
			},
			init() {
				this.isRefresh = false;
				return Promise.all([this.getTemplate()]).then(() => {
					uni.stopPullDownRefresh();
					this.isRefresh = true;
				});

			}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/.u-drawer-content {
		border-radius: 10px !important;
	}

	/deep/.u-drawer__scroll-view {
		border-radius: 10px !important;
	}

	/deep/.cu-bar .content {
		margin: auto 20rpx;
		width: 450rpx;
	}

	/deep/.u-grid-item {
		background: #f6f6f6 !important;
	}

	/deep/.uni-scroll-view {
		padding-top: 0px !important;
	}

	page {
		background-color: #fcfcfc !important;
	}

	.icon {
		width: 72rpx;
		height: 72rpx;
	}

	.grid-text {
		height: 32rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 70rpx;
	}

	.content {
		margin: 20rpx;
		border-radius: 8px 8px 8px 8px;
		background-color: white;
		height: 85vh;
		overflow: scroll;
	}

	.filter {
		display: flex;
		align-items: center;
		flex-direction: row;

		view {
			flex: 1;
			text-align: center;
			line-height: 70rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #777777;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		u-icon {
			margin-left: 8rpx;
		}

		.active {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FC5351;
		}
	}

	.lable {
		border-left: transparent !important;
		border-radius: 0rpx 5rpx 5rpx 0rpx;
		left: -3rpx;
		padding: 0 5px;
		font-size: 10px;
		font-weight: 500;
		color: #FC5351;
		height: 32rpx;
		border: 1px solid #FC5351;
		display: flex;
		align-items: center;
		justify-content: center;
		align-content: center;
		position: relative;
	}

	.popup-box {
		padding-top: var(--status-bar-height);
		margin: 0 20rpx;
	}

	.nav-line {
		height: var(--window-top);
	}

	.check-right {
		height: 54px;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 19px;
		align-items: center;
		display: flex;

		.active {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FC5351;
		}
	}
  /deep/.content{
    left: 50rpx;
  }
</style>
